<!-- 车辆安排 -->
<template>
    <div class="delivery-carArrange">
        <div class="common-box">
            <van-form @submit="save">
                <van-cell-group inset>
                    <van-field v-model="formInfo.containerno" label="柜号" readonly />
                    <van-field v-model="formInfo.realitydate" is-link name="datetimePicker" label="配送日期" placeholder="请选择"
                        required readonly @click="showDatePicker = true"
                        :rules="[{ required: true, message: '请选择配送日期' }]" />
                    <div class="car-box">
                        <div class="car-text" @click="place.isShow = true">
                            <span>{{ place.text }}</span>
                        </div>
                        <van-field v-model="formInfo.dzzy6" placeholder="填写车牌号" label="车牌号" required :rules="[{ required: true, message: '请填写车牌号' }, {
                            message: '正确车牌号由汉字、大写字母、数字组成',
                            trigger: 'onBlur',
                            pattern: /^[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/
                        }]" />
                    </div>
                    <van-field v-model="formInfo.dzzy7" placeholder="请输入司机姓名" label="司机姓名" required
                        :rules="[{ required: true, message: '请输入司机姓名' }]" />
                    <van-field v-model="formInfo.dzzy10" placeholder="请输入身份证号" label="身份证号" />
                    <van-field v-model="formInfo.dzzy8" placeholder="请输入手机号码" label="手机号码" type="tel" />
                    <van-field v-model="formInfo.deliverycause" rows="4" autosize label="配送说明" type="textarea"
                        style="border-radius: 12px;" placeholder="请输入配送说明" show-word-limit />
                </van-cell-group>
                <van-button block class="btn" native-type="submit">保存</van-button>
            </van-form>
            <van-calendar v-model:show="showDatePicker" color="#2386E3" :min-date="new Date(2018, 0, 1)"
                @confirm="dateConfirm" />
        </div>
        <div class="dialog" v-show="showTip">
            <div class="tip-box">
                <img src="@/assets/images/pic_cl.png">
                <div class="text">是否确认保存车辆信息？</div>
                <div class="btn-box">
                    <div class="btn-0 btn-1" @click="toSubmit">保存</div>
                    <div class="btn-0 btn-2" @click="showTip = false">取消</div>
                </div>
            </div>
        </div>
        <div class="place-fixed" v-show="place.isShow" @click.self="place.isShow = false">
            <div class="place-box">
                <div class="place-text">请选择车牌归属地</div>
                <div class="place-content">
                    <span :class="['place-item', place.index == index ? 'place-item-active' : '']"
                        v-for="(item, index) in place.list" :key="index" @click="changeActiveIdx(index)">{{ item }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { Ref } from 'vue'
import { useRoute } from 'vue-router'
import { msgSuccess } from '@/utils/message'
import { mallDeliveryInfoInputVehicleInfo } from '@/api/deliveryManage'
import { formatDate } from '@/utils/util'
import router from '@/router'

const route = useRoute();
let formInfo: any = reactive({ ...route.query })
let showDatePicker: Ref<boolean> = ref(false)
let showTip: Ref<boolean> = ref(false)
let place: any = reactive({
    list: ['粤', '浙', '冀', '闽', '京', '津', '沪',
        '渝', '豫', '云', '辽', '黑', '湘', '皖',
        '鲁', '新', '苏', '赣', '鄂', '桂', '甘',
        '晋', '蒙', '陕', '吉', '贵', '贵', '藏',
        '川', '宁', '琼'
    ],
    text: '粤',
    index: 0,
    isShow: false
})

onMounted(() => {
    handleCar();
})

function handleCar() {
    if (formInfo.dzzy6) {
        let license = formInfo.dzzy6;
        place.text = license.slice(0, 1);
        formInfo.dzzy6 = license.slice(1);
    }
}

function changeActiveIdx(index: number) {
    place.index = index;
    place.text = place.list[index];
    place.isShow = false;
}
function save() {
    showTip.value = true;
}

function toSubmit() {
    let info = JSON.parse(JSON.stringify(formInfo));
    info.dzzy6 = place.text + info.dzzy6;
    mallDeliveryInfoInputVehicleInfo(info).then(() => {
        showTip.value = false;
        msgSuccess('车辆安排成功');
        router.go(-1);
    })
}

function dateConfirm(value: string) {
    formInfo.realitydate = formatDate(value);
    showDatePicker.value = false;
}

</script>
<style lang="scss" scoped>
div,
span {
    box-sizing: border-box;
}

.delivery-carArrange {
    padding: 0 24px 24px 24px;
    width: 100%;
    background-color: #F2F2F2;
    min-height: 100vh;

    .common-box {
        margin: 30px 0;
        background-color: #fff;
        border-radius: 32px;
    }

    .btn {
        width: 700px;
        height: 96px;
        line-height: 96px;
        text-align: center;
        border-radius: 24px;
        color: #FFFFFF;
        background: #2386E3;
        position: fixed;
        bottom: 50px;
    }

    .dialog {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 100;
        width: 100%;
        min-height: 100vh;

        .tip-box {
            padding: 60px 54px;
            position: absolute;
            top: 300px;
            left: 50%;
            transform: translateX(-50%);
            width: 640px;
            height: 660px;
            background: linear-gradient(182deg, #EDF7FF 0%, #FFFFFF 100%);
            border-radius: 32px;
            border: 2px solid #979797;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            img {
                width: 520px;
                height: 310px;
            }

            .text {
                font-size: 36px;
                font-weight: 500;
                color: #333333;
            }

            .btn-box {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .btn-0 {
                    width: 256px;
                    height: 96px;
                    line-height: 96px;
                    text-align: center;
                    border-radius: 16px;
                    font-size: 36px;
                }

                .btn-1 {
                    background: #2386E3;
                    color: #FFFFFF;
                }

                .btn-2 {
                    background: #FFFFFF;
                    border: 2px solid #DDDDDD;
                }
            }

        }
    }

    .car-box {
        position: relative;

        .car-text {
            box-sizing: border-box;
            position: absolute;
            z-index: 2;
            left: 150px;
            top: 20px;
            display: flex;
            align-items: center;
            width: 66px;
            height: 46px;
            background: #F2F2F2;
            border-radius: 4px;
            font-size: 30px;
            font-weight: 400;
            color: #0064C2;

            span {
                margin-left: 5px;
            }

            &::after {
                position: absolute;
                right: 5px;
                top: 50%;
                transform: translateY(-50%);
                content: '';
                width: 0;
                height: 0;
                border-top: 10px solid #AAAAAA;
                border-right: 10px solid transparent;
                border-left: 10px solid transparent;
            }
        }
    }

    .place-fixed {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9999;

        .place-box {
            box-sizing: border-box;
            padding: 30px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 620px;
            font-size: 32px;
            background: #FFFFFF;
            border-radius: 16px 16px 0px 0px;

            .place-text {
                margin-bottom: 30px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
            }

            .place-content {
                display: flex;
                flex-wrap: wrap;

                .place-item {
                    margin-right: 20px;
                    margin-bottom: 22px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 80px;
                    height: 80px;
                    background: #F5F5F5;
                    border-radius: 8px;

                    &:nth-child(7n) {
                        margin-right: 0px !important;
                    }
                }

                .place-item-active {
                    background: #108EE9;
                    color: #FFFFFF;
                }

            }

        }
    }

}
</style>
